<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el和data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        data与el的2种写法
                1.el有2种写法
                                (1).new Vue时候配置el属性。
                                (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
                2.data有2种写法
                                (1).对象式
                                (2).函数式
                                如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
                3.一个重要的原则：
                                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
    -->

    <div id="root">
<!--        <h1>你好，{{vm.data.name}}</h1>-->
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    // el的两种语法
    // 第一种，创建Vue实例时，就配置el
    // const vm = new Vue({
    //     el: '#root',
    //     data: {
    //         name: 'Vue'
    //     }
    // })


    // data的两种写法
    new Vue({
        el: '#root',
        // 对象式
        // data: {
        //     name: 'Vue'
        // }

        // 函数式
        data(){
            return {
                name: '我是Vue的学习者'
            }
        }
    })
</script>
</html>